import {Col, Row} from "antd";
import React, {PropsWithChildren} from "react";
import {deleteEduInfo, EduInfo, updateEduInfo} from "../../../redux";
import {EditableText} from "../../editable-text";
import {EditableDateText} from "../../editable-date-text";
import {MyEditor} from "../../my-editor";
import {ControlBar} from "../../control-bar";
import {useAppDispatch, useAppSelector} from "../../../redux/hooks";
import {ClsControl} from "../../block-control";

interface PropsType {
    index: number
    value: EduInfo
}

export const REduExperienceItem: React.FC<PropsType> = ({
    index,
    value
}) => {
    const dispatch = useAppDispatch()

    return <ClsControl controlBar={
        <ControlBar
            style={{right: '-36px', top: '50%', flexDirection: 'column', transform: 'translateY(-50%)'}}
            displayConfig={{delete: true}}
            onClickDelete={() => {
                dispatch(deleteEduInfo({index}))
            }}
        ></ControlBar>
    }>
        <Row gutter={10} justify={"space-between"}>
            <Col>
                <EditableDateText
                    defaultStartDate={value.beginDate}
                    defaultEndDate={value.endDate}
                    onDateChange={([startDate, endDate]) => {
                    dispatch(updateEduInfo({
                        index, updateValue: { beginDate: startDate, endDate}
                    }))
                }}></EditableDateText>
            </Col>
            <Col>
                <EditableText
                    defaultText={value.schoolName}
                    onTextChange={(schoolName) => {
                    dispatch(updateEduInfo({
                        index, updateValue: { schoolName }
                    }))
                }} placeholder={'学校名称'}></EditableText>
            </Col>
        </Row>
        <Row gutter={10}>
            <Col>
                <EditableText
                    defaultText={value.major}
                    onTextChange={(major) => {
                    dispatch(updateEduInfo({
                        index, updateValue: { major }
                    }))
                }} placeholder={'专业'}></EditableText>
            </Col>
            <Col>
                <span > | </span>
            </Col>
            <Col>
                <EditableText
                    defaultText={value.degree}
                    onTextChange={(degree) => {
                    dispatch(updateEduInfo({
                        index, updateValue: { degree }
                    }))
                }} placeholder={'学历'}></EditableText>
            </Col>
        </Row>
        <MyEditor
            defaultHtml={value.detail}
            onContentChange={(html) => {
            dispatch(updateEduInfo({
                index, updateValue: { detail: html }
            }))
        }}></MyEditor>
    </ClsControl>
}
